<template lang="pug">
  .nav-bar(v-show="isShow", :class="{'animated bounceInDown': isShow}")
    ul.nav-menu-list(:style="getBodyStyle", v-if="getNavMenu")
      li.pic-head(:style="getHeadStyle")

      li.nav-menu-item.pos-r(v-for="(menu, ids) in getNavMenu", :key="ids")
        p.new-text-pc.pos-a(v-if="isLanjiukj && !menu.is_menu_watch") new
        a.omit(href="javascript:;", @click="handleMenuClick(menu, ids)", :style="menuIndex == ids ? getActiveStyle : ''") {{menu.title}}
          span.icon(v-if="menu.children && menu.children.length > 0")
            i.iconfont &#xe794;

        ul.submenu-list(v-if="menu.children && menu.children.length > 0")
          li.submenu-item.pos-r(v-for="(sub, idx) in menu.children", :key="idx")
            p.new-text-pc2.pos-a(v-if="isLanjiukj && !sub.is_menu_watch") new
            a.omit(href="javascript:;", @click="handleMenuClick(sub)") {{sub.title}}
            p.date-text-pc(v-if="isLanjiukj") {{sub.created.substr(0, 10)}}

      li.pic-tail(:style="getTailStyle")
</template>

<script>
import themeMixin from '@/mixins/theme'
import { handleCustomMenu } from '@/utils/menu'
import { mapGetters } from 'vuex'
import $API from '@/api/services'

export default {
  mixins: [themeMixin],
  data() {
    return {
      isLanjiukj: $globalconfig.MODULES.IS_LANJIUKJ_PROGRAM_OPEN,
      menuIndex: 0,
      isShow: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.isShow = true
      })
    })
  },
  computed: {
    ...mapGetters(['panoInfo', 'menuData']),
    getNavMenu() {
      if(this.menuData && this.menuData.navmenu.length) {
        return this.menuData.navmenu
      }
    },
    menuStyle() {
      let topMenuStyle = {
        headimg: '', // 头部图片
        bodyimg: '', // 主体图片
        tailimg: '', // 尾巴图片
        activeimg: '', // 高亮图片
        submenuTop: '' // 二级分类高度
      }
      if(this.panoInfo && this.panoInfo.topmenustyle) {
        const topMenustyleObj = JSON.parse(this.panoInfo.topmenustyle)
        const bdRadius = topMenustyleObj.radius
        const height = topMenustyleObj.height
        const baseUrl = $globalconfig.URLS.API
        topMenuStyle = {
          headimg: {
            background: `url("${baseUrl + topMenustyleObj.headimg}") no-repeat`,
            borderRadius: `${bdRadius} 0 0 ${bdRadius}`,
            width: height,
            height: height,
            left: `-${height}`
          },
          bodyimg: {
            background: `url("${baseUrl + topMenustyleObj.bodyimg}") repeat-x`,
            height: height,
            lineHeight: height
          },
          tailimg: {
            background: `url("${baseUrl + topMenustyleObj.tailimg}") no-repeat`,
            borderRadius: ` 0 ${bdRadius} ${bdRadius} 0`,
            width: height,
            height: height,
            right: `-${height}`
          },
          activeimg: {
            background: `url("${baseUrl + topMenustyleObj.activeimg}") no-repeat`,
            backgroundSize: '100% 100%',
            height: height
          },
          submenuTop: {
            top: height + 20,
            background: `url("${baseUrl + topMenustyleObj.bodyimg}") repeat-x`
          }
        }
        return topMenuStyle
      } else {
        return null
      }
    },
    getBodyStyle() {
      if(!this.menuStyle) return
      return this.menuStyle.bodyimg
    },
    getHeadStyle() {
      if(!this.menuStyle) return
      return this.menuStyle.headimg
    },
    getTailStyle( ) {
      if(!this.menuStyle) return
      return this.menuStyle.tailimg
    },
    getActiveStyle() {
      if(!this.menuStyle) return
      return this.menuStyle.activeimg
    },
    getsubMenuTopStyle() {
      if(!this.menuStyle) return
      return this.menuStyle.submenuTop
    }
  },
  methods: {
    getNewTextShow(item) {
      if (!item.is_menu_watch) {
        return true
      }
      return false
    },
    // 二级菜单获取父级id
    getParentId(cid) {
      let id = 0
      let arr = this.menuData.navmenu || []
      arr.map(item => {
        if (item.children && item.children.length) {
          item.children.map(child => {
            if (child.id == cid) {
              id = item.id
            }
          })
        }
      })
      return id
    },
    handleMenuClick(item, index) {
      // 845定制，有二级菜单，一级菜单不能点
      if (item.children && item.children.length) return
      // if (this.isLanjiukj && item.children && item.children.length) return
      if (this.isLanjiukj && this.getNewTextShow(item)) {
        if (item.level == 0) {
          this.$store.dispatch('setNavmenuNew', {level: item.level, id: item.menu_id || item.id})
          $API('sendMenuClick', [item.menu_id || item.id])
        } else if (item.level == 1) {
          this.$store.dispatch('setNavmenuNew', {level: item.level, id: item.menu_id || item.id})
          $API('sendMenuClick', [item.menu_id || item.id])
        }
      }
      this.menuIndex = index
      handleCustomMenu(item)
    }
  }
}
</script>

<style lang="stylus">
$white = #fff
$black = #000
$bar-height = 40px
.theme-pc-g
  .nav-bar
    right 40%
.nav-bar
  position: absolute
  top: 30px
  right: 50px
  z-index: 10
  .nav-menu-list
    position: relative
    height: $bar-height
    background-size: 100% 100%
    & > li.pic-head, & > li.pic-tail
      position: absolute
      top: 0
      width: 40px
      height: $bar-height
      line-height: $bar-height
      background-size: 100% 100%
      z-index: -1
    & > li.pic-head
      left: -30px
    & > li.pic-tail
      right: -30px
    .nav-menu-item, .submenu-item
      float: left
      min-width: 100px
      max-width: 120px
      line-height: $bar-height
      text-align: center
      .new-text-pc
        right 5px
        top -10px
        z-index 2
        height 0
        color #f00
        font-size 11px
      &:hover
        &.nav-menu-item:after
          position: absolute
          z-index: -1
          left: 0
          top: 0
          content: ''
          height: 100%
          width: 100%
          background: rgba($black, .2)
        .submenu-list
          display: block
          opacity: 1
        a .icon
          transform: rotate(-90deg)
      a
        display: block
        color: $white
        font-size: 14px
        .icon
          display: inline-block
          transition: all .4s
          transform: rotate(90deg)
      .submenu-list
        position: absolute
        left: 0
        top: 40px!important
        width: auto
        background: rgba(0, 0, 0, .2)
        transition: all .8s
        opacity: 0
        display: none
        &:hover
          .nav-menu-item
            background: rgba($black, .2)
        .submenu-item
          line-height: $bar-height
          text-align: center
          .new-text-pc2
            right 5px
            top -10px
            z-index 2
            height 0
            color #f00
            font-size 11px
          .date-text-pc
            height 12px
            line-height 12px
            width 100%
            font-size 10px
            color #ccc
</style>
